<template>
    <div>
        <h1 @click="pringTest">mixin测试</h1>
        <img :src="base64Img" alt="">
        <button @click="change">图片转换</button>
        <van-uploader v-model="fileList" multiple />
    </div>
</template>

<script>
import { mixin2 } from './maxin'
// import { ref } from 'vue';
export default {
    // setup() {
    //     const fileList = ref([
    //     { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
    //     // Uploader 根据文件后缀来判断是否为图片文件
    //     // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
    //     { url: 'https://img.yzcdn.cn/vant/leaf.jpg', isImage: true },
    //     ]);
    //     return {
    //         fileList,
    //     };
    // },
    mixins: [mixin2],
    props: ['receive'],
    data() {
        return {
            imgShow: false,
            fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
            //#region 
            base64Img : ``
            //#endregion
        }
    },
    methods: {
        base64ImgtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        },
        change(){
            let img = this.base64ImgtoFile(this.base64Img)
            this.imgShow = true
            this.fileList.push(
                { url: img }
            )
            console.log(1,img)
        }
    }
}
</script>

<style scoped>
img{
    width: 200px;
    height: 200px;
}
</style>